<script setup>
import { horizontalPicture } from '@/stores/videoData.js'
import { preloadImage } from '@/utils/tool.js';
import { useRouter } from 'vue-router';

const router = useRouter()
const toVideoClass = (val) => {
  if (val === 2) {
    router.push({ path: '/NotFound' })
  }
  else {
    router.push({ path: '/VideoClass', query: { 'subject': val } })
  }
}

onMounted(() => {
  horizontalPicture.forEach(item => {
    preloadImage(item.img)
  })
})
</script>

<template>
  <v-row class="subjectImg" align="center" justify="center">
    <template v-for="(item, i) in horizontalPicture" :key="i">
      <v-col cols="12" md="4">
        <v-hover v-slot="{ isHovering, props }">
          <v-card :elevation="isHovering ? 12 : 2" :class="{ 'on-hover': isHovering, }" v-bind="props">
            <v-img :src="item.img" cover class="subjectImgItem" @click="toVideoClass(item.id)" height="225px" />
          </v-card>
        </v-hover>
      </v-col>
    </template>
  </v-row>
</template>

<style lang="scss" scoped>
.v-card {
  transition: opacity .4s ease-in-out;
}

.v-card:not(.on-hover) {
  opacity: 0.6;
}

.show-btns {
  color: rgba(255, 255, 255, 1) !important;
}

.subjectImg {
  margin-top: 8vh;
}

.subjectImgItem {
  &:hover {
    cursor: pointer;
  }
}
</style>